import React, {Component} from 'react';



class Counter extends Component {


    constructor(props) {
        super(props);
        this.state = {
            count: this.props.initValue || 0
        }
    }


    add = () => {
        this.setState({
            count: ++ this.state.count
        });
        let currCount = this.state.count;
        this.props.onUpdate(currCount, --currCount);
    }
    
    
    sub = () => {
        this.setState({
            count: -- this.state.count
        });
        let currCount = this.state.count;
        this.props.onUpdate(currCount, ++currCount);
    }


    render() {

        return (
            <div style={{}}>
                <section style={{margin: 20}}>
                    <button style={{margin: 10}} onClick={this.add}>+</button> 
                    <button style={{margin: 10}} onClick={this.sub}>-</button> 
                    <span style={{marginLeft: 20}}>Count: {this.state.count}</span>
                </section>
            </div>
        );
    }
}



export default Counter;